<template>
	<div class="app-container">
		<comprehensive-table @selection-change="selectionChange" :columns="column" :data="data" @reset="reset"
			@onSubmit="onSubmit">

			<!-- 添加删除按钮插槽-->
			<template v-slot:btn>
				<div style="display: flex;justify-content: flex-end">
					<el-button type="primary" @click="add">添加</el-button>
					<el-button type="danger" @click="batchDelete">删除</el-button>
				</div>
			</template>

			<template v-slot:operation="scope">
				<el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">编辑
				</el-button>
				<el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
					删除
				</el-button>
			</template>

			<template v-slot:url="{ row }">

			</template>

		</comprehensive-table>

		<el-dialog :visible.sync="dialogVisible" :title="title" width="50%">
			<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
				:size="formSize">
				<el-form-item label="商品分类名称" prop="name">
					<el-input v-model="ruleForm.name" />
				</el-form-item>
				<el-form-item label="value" prop="value">
					<el-input v-model="ruleForm.value" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="handleClose('ruleFormRef')">确定</el-button>
				</span>
			</template>
		</el-dialog>

	</div>
</template>
<script>
	var dayjs = require('dayjs')
	import ComprehensiveTable from './components/comprehensive.vue';
	import axios from 'axios';
	const column = [{
			type: 'selection',
			width: 60
		},
		{
			name: 'id',
			label: '分类ID',
			inSearch: true,
			valueType: 'input',
			width: 200,
		},
		{
			name: 'name',
			label: '列表名称',
			inSearch: true,
			valueType: 'input',
			width: 200
		},
		{
			name: 'value',
			label: 'value',
			valueType: 'input',
			width: 200
		},
		{
			name: 'createTime',
			label: '发布时间',
			valueType: 'input',
			width: 240
		},
		{
			name: 'modifyTime',
			label: '修改时间',
			valueType: 'input',
			width: 240
		},

		{
			name: 'operation',
			slot: true,
			fixed: 'right',
			width: 240
		},
	]
	export default {
		components: {
			ComprehensiveTable
		},
		data() {
			return {
				id: '',
				createTime: '',
				modifyTime: '',
				data: [], //列表数据
				column, //列表表头
				formSize: 'default',
				//新增表单数据
				ruleForm: {
					name: '',
					value: ''
				},
				//验证规则
				rules: {
					name: [{
							required: true,
							message: '请输入商品分类名称',
							trigger: 'blur'
						},
						{
							min: 1,
							max: 10,
							message: '长度在 1 到 10 个字符',
							trigger: 'blur'
						},
					],
					value: [{
						required: true,
						message: '请输入商品分类值',
						trigger: 'blur'
					}, ],
				},
				//弹窗是否展开标记
				dialogVisible: false,
				//弹窗标题
				title: '新增',
				rowObj: {},
				selectObj: [],
				ides: {}
			}
		},
		mounted() {
			this.fetchData();
		},
		methods: {
			//新增
			async handleClose(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (valid) {
							if(this.title==='新增'){
								axios.post('http://43.136.172.73/api/v1/commodity/category', {
									name: this.ruleForm.name,
									value: this.ruleForm.value
								}, {
									headers: {
										'Authorization': 'sfsdf', // 设置认证token
									}
								}).then(resp => {
										console.log(resp.data.data)
										this.fetchData();
								})
								this.dialogVisible = false
							}else {
								axios.put('http://43.136.172.73/api/v1/commodity/category/update', {
									id: this.id,
									name: this.ruleForm.name,
									value: this.ruleForm.value,
								}, {
									headers: {
										'Authorization': 'sfsdf', // 设置认证token
									}
								}).then(resp => {
										console.log(resp.data.data)
										this.fetchData();
								})
								this.dialogVisible = false
							}
							
							
						} else {
							console.log('error submit!', fields)
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			add() {
				this.title = '新增'
				this.dialogVisible = true
			},

			//批量删除
			batchDelete() {
				if (this.selectObj.length === 0) {
					return this.$message.error('未选中任何行');
				}
				this.$confirm(
						'你确定要删除选中项吗?',
						'温馨提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning',
							draggable: true,
						}
					)
					.then(() => {
						// 构造请求参数
						const ides = [];
						for (let i = 0; i < this.selectObj.length; i++) {
							ides.push(this.selectObj[i].id);
						}
						console.log(ides);
						axios.delete('http://43.136.172.73/api/v1/commodity/category/deletes', {
								data: ides,
								headers: {
									'Authorization': 'sfsdf', // 设置认证token
								}
							})
							.then(response => {
								// 请求成功，可以在这里处理返回的数据
								console.log(response.data);
								this.$message.success('删除成功');
								/* this.data = this.data.concat([]); */
								this.fetchData()
							})
							.catch(error => {
								// 请求出错，可以在这里处理错误
								console.error(error);
							});
					})
					.catch(() => {
						// 取消删除操作
					});
			},

			//单项删除
			del(row) {
				this.$confirm(
						'你确定要删除当前项吗?',
						'温馨提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning',
							draggable: true,
						}
					)
					.then(() => {
						// 构造请求参数
						const ides = [];
						ides.push(row.id);
						console.log(ides);
						axios.delete('http://43.136.172.73/api/v1/commodity/category/deletes', {
								data: ides,
								headers: {
									'Authorization': 'sfsdf', // 设置认证token
								}
							})
							.then(response => {
								// 请求成功，可以在这里处理返回的数据
								console.log(response.data);
								this.$message.success('删除成功');
								this.fetchData()
							})
							.catch(error => {
								// 请求出错，可以在这里处理错误
								console.error(error);
							});
					})
					.catch(() => {
						// 取消删除操作
					});
			},

			selectionChange(val) {
				this.selectObj = val
				/* console.log(this.selectObj); // 选中的行数据数组 */
			},


			edit(row) {
				this.title = '编辑'
				this.rowObj = row
				this.dialogVisible = true
				this.ruleForm.name = row.name
				this.ruleForm.value = row.value
				this.id = row.id
				this.createTime = row.createTime
				this.modifyTime = row.modifyTime
			},



			//重置
			reset() {
				this.$message.success('触发重置方法')
			},

			//查询
			onSubmit() {
				this.$message.success('触发查询方法')
			},

			// 请求列表数据
			fetchData() {
				axios.get('http://43.136.172.73/api/v1/commodity/category/list', {
						headers: {
							'Authorization': 'sfsdf',
						}
					})
					.then(response => {
						// 请求成功，可以在这里处理返回的数据
						this.data = response.data.data;
						console.log(this.data);
					})
					.catch(error => {
						// 请求出错，可以在这里处理错误
						console.error(error);
					});
			}
		},

	}
</script>
<style scoped>
	.edit-input {
		padding-right: 100px;
	}

	.cancel-btn {
		position: absolute;
		right: 15px;
		top: 10px;
	}
</style>